<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>发型工作室-工资结算</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Font Awesome -->
<link rel="stylesheet"
	href="../util/AdminLTE/plugins/font-awesome/css/font-awesome.min.css">
<!-- Ionicons -->
<link rel="stylesheet"
	href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<!-- DataTables -->
<link rel="stylesheet"
	href="../util/AdminLTE/plugins/datatables/dataTables.bootstrap4.min.css">
<!-- Theme style -->
<link rel="stylesheet" href="../util/AdminLTE/dist/css/adminlte.min.css">
<!-- iCheck -->
<link rel="stylesheet"
	href="../util/AdminLTE/plugins/iCheck/flat/blue.css">
<!-- Morris chart -->
<link rel="stylesheet" href="../util/AdminLTE/plugins/morris/morris.css">
<!-- jvectormap -->
<link rel="stylesheet"
	href="../util/AdminLTE/plugins/jvectormap/jquery-jvectormap-1.2.2.css">
<!-- Date Picker -->
<link rel="stylesheet"
	href="../util/AdminLTE/plugins/datepicker/datepicker3.css">
<!-- Daterange picker -->
<link rel="stylesheet"
	href="../util/AdminLTE/plugins/daterangepicker/daterangepicker-bs3.css">
<!-- bootstrap wysihtml5 - text editor -->
<link rel="stylesheet"
	href="../util/AdminLTE/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css">
<!-- 主CSS -->
<link rel="stylesheet" type="text/css" href="../util/css/main.css">
<!-- 公共类CSS -->
<link rel="stylesheet" type="text/css" href="../util/css/public.css">
</head>
<body>

	<div class="wrapper">

		<!-- 头部 -->
		<nav
			class="main-header navbar navbar-expand bg-white navbar-light border-bottom">
			<!-- Left navbar links -->
			<ul class="navbar-nav">
				<li class="nav-item"><a class="nav-link" data-widget="pushmenu"
					href="#"><i class="fa fa-bars"></i></a></li>
				<li class="nav-item d-none d-sm-inline-block"><a href="#"
					class="nav-link">Home</a></li>
			</ul>

			<!-- Right navbar links -->
			<ul class="navbar-nav ml-auto">
				<!-- Notifications Dropdown Menu -->
				<li class="nav-item dropdown"><a class="nav-link"
					data-toggle="dropdown" href="#"> <i class="fa fa-user"></i>
				</a>
					<div class="dropdown-menu dropdown-menu-lg dropdown-menu-right">
						<span class="dropdown-item dropdown-header">早上好，用户<span
							th:text="${managerNumber}"></span></span>
						<div class="dropdown-divider"></div>
						<a href="/login/cancellation" class="dropdown-item"> <i
							class="fa fa-sign-out"></i> 用户注销
						</a>
						<div class="dropdown-divider"></div>
						<a href="#" class="dropdown-item" data-toggle="modal"
							data-target="#changePassword"> <i class="fa fa-address-card"></i>
							修改密码
						</a>
					</div></li>
				<li class="nav-item"><a class="nav-link"
					data-widget="control-sidebar" data-slide="true" href="#"><i
						class="fa fa-th-large"></i></a></li>
			</ul>
		</nav>
		<!-- 修改密码遮罩层（模态框） -->
		<div class="modal fade" id="changePassword" tabindex="-1"
			role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="card card-primary">
						<div class="card-header">
							<h3 class="card-title">修改密码</h3>
						</div>
						<!-- /.card-header -->
						<!-- form start -->
						<form class="form-horizontal" action="/login/changePassword"
							method="post" onsubmit="return changePassword()">
							<div class="card-body">
								<div class="form-group">
									<label for="inputPassword_old">旧密码</label>

									<div class="col-sm-10">
										<input type="password" class="form-control" id="password"
											name="password" placeholder="请输入当前密码">
									</div>
								</div>
								<div class="form-group">
									<label for="inputPassword_new">新密码</label>

									<div class="col-sm-10">
										<input type="password" class="form-control" id="newPassword_1"
											name="newPassword_1" placeholder="请输入新密码">
									</div>
								</div>
								<div class="form-group">
									<label for="inputPassword_conf">确认密码</label>

									<div class="col-sm-10">
										<input type="password" class="form-control" id="newPassword_2"
											name="newPassword_2" placeholder="请确认新密码">
									</div>
								</div>
							</div>
							<!-- /.card-body -->
							<div class="modal-footer">
								<button type="button" class="btn btn-default"
									data-dismiss="modal">关闭</button>
								<button type="submit" class="btn btn-primary">提交更改</button>
							</div>
						</form>
					</div>
				</div>
				<!-- /.modal-content -->
			</div>
			<!-- /.modal -->
		</div>
		<!-- 头部 -->

		<!-- 侧边栏 -->
		<aside class="main-sidebar sidebar-dark-primary elevation-4">
			<!-- Brand Logo -->
			<a href="index3.html" class="brand-link"> <img
				src="../../util/AdminLTE/dist/img/AdminLTELogo.png"
				alt="AdminLTE Logo" class="brand-image img-circle elevation-3"
				style="opacity: .8"> <span
				class="brand-text font-weight-light">雷格发型工作室</span>
			</a>

			<!-- Sidebar -->
			<div class="sidebar">
				<!-- Sidebar user panel (optional) -->
				<div class="user-panel mt-3 pb-3 mb-3 d-flex">
					<div class="image">
						<img src="../../util/AdminLTE/dist/img/user2-160x160.jpg"
							class="img-circle elevation-2" alt="User Image">
					</div>
					<div class="info">
						<a href="#" class="d-block">Alexander Pierce</a>
					</div>
				</div>

				<!-- Sidebar Menu -->
				<nav class="mt-2">
					<ul class="nav nav-pills nav-sidebar flex-column"
						data-widget="treeview" role="menu" data-accordion="false">
						<!-- Add icons to the links using the .nav-icon class
                         with font-awesome or any other icon font library -->
						<li class="nav-header">客户</li>
						<li class="nav-item"><a href="/customer/" class="nav-link">
								<i class="nav-icon fa fa-user"></i>
								<p>客户信息管理</p>
						</a></li>
						<li class="nav-item"><a href="/payList/" class="nav-link">
								<i class="nav-icon fa fa-credit-card"></i>
								<p>客户充值</p>
						</a></li>
						<li class="nav-item"><a href="/record/" class="nav-link">
								<i class="nav-icon fa fa-bars"></i>
								<p>客户服务结算</p>
						</a></li>
						<li class="nav-header">员工</li>
						<li class="nav-item has-treeview menu-open"><a href="#"
							class="nav-link "> <i class="nav-icon fa fa-users"></i>
								<p>
									员工管理 <i class="right fa fa-angle-left"></i>
								</p>
						</a>
							<ul class="nav nav-treeview">
								<li class="nav-item"><a href="/employeeType/"
									class="nav-link "> <i class="fa fa-circle-o nav-icon"></i>
										<p>员工类型管理</p>
								</a></li>
								<li class="nav-item"><a href="/employeeManage/"
									class="nav-link"> <i class="fa fa-circle-o nav-icon"></i>
										<p>员工信息管理</p>
								</a></li>
							</ul></li>
						<li class="nav-header">服务</li>
						<li class="nav-item"><a href="/serviceItem/" class="nav-link">
								<i class="nav-icon fa fa-print"></i>
								<p>服务项目管理</p>
						</a></li>
						<li class="nav-header">统计</li>
						<li class="nav-item"><a href="/count/salary"
							class="nav-link active"> <i class="nav-icon fa fa-calendar"></i>
								<p>统计工资结算</p>
						</a></li>
						<li class="nav-item"><a href="/count/statistics"
							class="nav-link"> <i class="nav-icon fa fa-usd"></i>
								<p>统计盈收</p>
						</a></li>
						<li class="nav-item"><a href="/expense/" class="nav-link ">
								<i class="nav-icon fa fa-usd"></i>
								<p>支出项目统计</p>
						</a></li>
					</ul>
				</nav>
				<!-- /.sidebar-menu -->
			</div>
			<!-- /.sidebar -->
		</aside>
		<!-- 侧边栏 -->

		<!-- 主体内容 -->
		<div class="content-wrapper">
			<section class="content-header">
				<div class="container-fluid">
					<div class="row mb-2">
						<div class="col-sm-6">
							<h1>统计工资结算</h1>
						</div>
						<div class="col-sm-6">
							<ol class="breadcrumb float-sm-right">
								<li class="breadcrumb-item"><a href="#">统计</a></li>
								<li class="breadcrumb-item active">统计工资结算</li>
							</ol>
						</div>
					</div>
				</div>
				<!-- /.container-fluid -->
			</section>

			<section class="content">
				<div class="container-fluid">
					<div class="row">
						<div class="col-12">
							<div class="card">
								<!-- /.card-header -->
								<div class="card-body">
									<div class="table-responsive">
										<div class="col-xs-12">
											<div class="form-group col-md-2" >
											<a ><select id="type"  name="type"
													class="form-control">
													<option>当前页<span th:text="${month}"></span>月</option>
													<option value="1">1月</option>
													<option value="2">2月</option>
													<option value="3">3月</option>
													<option value="4">4月</option>
													<option value="5">5月</option>
													<option value="6">6月</option>
													<option value="7">7月</option>
													<option value="8">8月</option>
													<option value="9">9月</option>
													<option value="10">10月</option>
													<option value="11">11月</option>
													<option value="12">12月</option>
												</select></a>
											</div>
											<table style="min-width: 500px" id="form"
												class="table table-hover">
												<thead>
												<input id="user" type="text" class="form-control">
													<tr>
														<th>编号</th>
														<th>员工姓名</th>
														<th>员工工号</th>
														<th>当月完成服务数</th>
														<th>基本工资</th>
														<th>提成比例</th>
														<th>加权系数</th>
														<th>应付工资</th>
														<th>用户实付金额</th>
														<th>操作</th>
													</tr>
												</thead>
												<tbody id="myTable">
													<tr th:each="ls : ${listSalary}">
														<td></td>
														<td class="id" th:text="${ls.employeeManage.id}">1</td>
														<td th:text="${ls.employeeManage.name}">芬必得</td>
														<td th:text="${ls.employeeManage.number}">62284824886541125</td>
														<td th:text="${ls.count}">0.2</td>
														<td th:text="${ls.employeeType.basicSalary}">53</td>
														<td th:text="${ls.employeeType.commissionRate}">2000</td>
														<td th:text="${ls.employeeType.weightingFactor}">1.0</td>
														<td th:text="${ls.sumSalary}">2000</td>
														<td th:text="${ls.sumPayavle}">2500</td>
														<td><a class="btn btn-primary btn-sm"
															style="color: white;"
															th:href="@{'/count/salaryDetails?number='+${ls.employeeManage.number}+'&month='+${month}}"><i
																class="fa fa-user"></i>服务记录</a></td>
													</tr>
												</tbody>
											</table>
										</div>
										<div class="card-footer clearfix" id="myButton">
											<ul class="pagination pagination-sm m-0 float-right">
												<li class="page-item"><a class="page-link"
													th:href="@{'/count/salary?page=0&month='+ ${month}}">第一页</a></li>
												<li class="page-item"><a class="page-link"
													th:if="${page}>0"
													th:href="@{'/count/salary?page='+${page-1} + '&month='+ ${month}}">上一页</a></li>
												<li class="page-item"><a class="page-link"
													style="cursor: default"><span th:text="${page+1}"></span>
														/ <span th:text="${maxPage+1}"></span></a></li>
												<li class="page-item"><a class="page-link"
													th:if="${page}<${maxPage}"
													th:href="@{'/count/salary?page='+${page+1}  + '&month='+ ${month}}">下一页</a></li>
												<li class="page-item"><a class="page-link"
													th:href="@{'/count/salary?page='+${maxPage}  + '&month='+ ${month}}">末页</a></li>
											</ul>
										</div>
									</div>
									<!-- /.card-body -->
								</div>
							</div>
						</div>
					</div>
			</section>
		</div>
		<!-- 主体内容 -->

		<!--底部版权信息-->
		<footer class="main-footer">
			<strong>Copyright &copy; 2018-05-03 <a
				href="https://coding.net/u/leige123321/p/HairCut/git?public=true">项目主页</a>.
			</strong> All rights reserved.
			<div class="float-right d-none d-sm-inline-block">
				<b>雷格</b> 发型工作室
			</div>
		</footer>
		<!--底部版权信息-->

	</div>

	<!-- jQuery -->
	<script src="../util/AdminLTE/plugins/jquery/jquery.min.js"></script>
	<!-- jQuery UI 1.11.4 -->
	<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
	<!-- Resolve conflict in jQuery UI tooltip with Bootstrap tooltip -->
	<script>
    $.widget.bridge('uibutton', $.ui.button)
</script>
	<!-- Bootstrap 4 -->
	<script
		src="../util/AdminLTE/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
	<!-- DataTables -->
	<script
		src="../util/AdminLTE/plugins/datatables/jquery.dataTables.min.js"></script>
	<script
		src="../util/AdminLTE/plugins/datatables/dataTables.bootstrap4.min.js"></script>
	<!-- Morris.js charts -->
	<script
		src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
	<script src="../util/AdminLTE/plugins/morris/morris.min.js"></script>
	<!-- Sparkline -->
	<script
		src="../util/AdminLTE/plugins/sparkline/jquery.sparkline.min.js"></script>
	<!-- jvectormap -->
	<script
		src="../util/AdminLTE/plugins/jvectormap/jquery-jvectormap-1.2.2.min.js"></script>
	<script
		src="../util/AdminLTE/plugins/jvectormap/jquery-jvectormap-world-mill-en.js"></script>
	<!-- jQuery Knob Chart -->
	<script src="../util/AdminLTE/plugins/knob/jquery.knob.js"></script>
	<!-- daterangepicker -->
	<script
		src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.2/moment.min.js"></script>
	<script
		src="../util/AdminLTE/plugins/daterangepicker/daterangepicker.js"></script>
	<!-- datepicker -->
	<script
		src="../util/AdminLTE/plugins/datepicker/bootstrap-datepicker.js"></script>
	<!-- Bootstrap WYSIHTML5 -->
	<script
		src="../util/AdminLTE/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js"></script>
	<!-- Slimscroll -->
	<script
		src="../util/AdminLTE/plugins/slimScroll/jquery.slimscroll.min.js"></script>
	<!-- FastClick -->
	<script src="../util/AdminLTE/plugins/fastclick/fastclick.js"></script>
	<!-- AdminLTE App -->
	<script src="../util/AdminLTE/dist/js/adminlte.min.js"></script>
	<!-- AdminLTE dashboard demo (This is only for demo purposes) -->
	<script src="../util/AdminLTE/dist/js/pages/dashboard.js"></script>
	<!-- AdminLTE for demo purposes -->
	<script src="../util/AdminLTE/dist/js/demo.js"></script>
	<script>
	$("#type").bind("change",function(){
		var monthVal = $(this).val();
		window.location.replace("/count/salary?month="+monthVal);  
	});
function PageNext(a){//定义了2个参数a,b
	var len = $('table tr').length;
	var page = len * a;
    for(var i = 1;i<len;i++){
        $('table tr:eq('+i+') td:first').text(i+page);
    }
}
$(function () {
	var tableHtml = $("#myTable").html();
	var buttonHtml = $("#myButton").html();
	$('#user').keyup(function() {  
       	$("#myTable").html("");
        var conditions=$(this).val();  
        if(conditions!=''){  
            $.ajax({  
                type: "post",  
                url: "/count/query",  
                data:{conditions:conditions},  
                dataType: "json",  
                error: function(request) {  
                    alert("Connection error:"+request.error);  
                },  
                success: function(data) {  
                	var myHtml = "";
                	var myhtmltd = "";
                	for(var i = 0;i<data.length;i++){
                   		myhtmltd ="<td>"+data[i].date+"</td><td class='id'>"+data[i].id+"</td><td>"+
                   		data[i].name+"</td><td>"+
                   		data[i].number+"</td><td>"+
                   		data[i].count+"</td><td>"+
                   		data[i].basicSalary+"</td><td>"+
                   		data[i].commissionRate+"</td><td>"+
                   		data[i].weightingFactor+"</td><td>"+
                   		data[i].sumSalary+"</td><td>"+
                   		data[i].sumPayavle+"</td><td><a class='btn btn-primary btn-sm'style='color: white;'href='/count/salaryDetails?number="+data[i].number+"&month="+data[i].month+"'><iclass='fa fa-user'></i>服务记录</a></td>";
                    	 myHtml=myHtml+"<tr>"+myhtmltd+"</tr>";
                    	  //循环数据追加到 myHtml
                    	}
                    	myHtml=myHtml;
                    	 $("#myTable").html(myHtml);
                    	 $("#myButton").html("");
                    	 nameId();
                }  
            });   
        }else{  
        $("#myTable").html(tableHtml);
       	$("#myButton").html(buttonHtml);
       	nameId();
        }  
        
    });  
	 //$('table tr:not(:first)').remove();
    var len = $('table tr').length;
    for(var i = 1;i<len;i++){
        $('table tr:eq('+i+') td:first').text(i);
    }
	$(".id").hide();
        $('#form').DataTable({
            "paging": true,
            "lengthChange": false,
            "searching": false,
            "ordering": true,
            "info": true,
            "autoWidth": false
        });
    });
//修改密码表单验证
function changePassword() {
    var oldPassword = document.getElementById('password').value;
    var newPassword_1 = document.getElementById('newPassword_1').value;
    var newPassword_2 = document.getElementById('newPassword_2').value;
    if (oldPassword == ""){
        document.getElementById("span_password").innerHTML='请输入当前密码';
        return false;
    }else if (newPassword_1 == ""){
        document.getElementById("span_password").innerHTML='请输入新密码';
        return false;
    }else if (newPassword_2 == ""){
        document.getElementById("span_password").innerHTML='请输入确认密码';
        return false;
    }else if (newPassword_1 != newPassword_2){
        document.getElementById("span_password").innerHTML='新密码和确认密码不一致';
        return false;
    }
    return true;
}
function nameId() {
	 //$('table tr:not(:first)').remove();
	$(".id").hide();
}
</script>
</body>
</html>